<template>
  <div class="tx-list-query">
    <slot />
    <div class="tx-list-query__button">
      <div class="tx-list-query__button__query">
        <el-button type="primary" @click="handleQuery" v-if="queryText">{{
          queryText
        }}</el-button>
        <slot name="button" />
      </div>
      <div class="tx-list-query__button__clean">
        <router-link v-if="cleanText" @click.native="handleClean" :to="$route">{{
          cleanText
        }}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    table: {
      type: Object,
      default: () => {
        return {
          query: {},
          page: {},
        };
      },
    },
    queryText: {
      type: String,
      default: "查询",
    },
    cleanText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  mounted() { 
  },
  methods: {
    handleQuery() {
      this.table.page.current = 1;
      // this.table.page.size = 10;
      this.$emit("query");
    },
    handleClean() {
      this.clean(this.table.query);
      this.$emit("clean");
      this.$emit("query");
    },

    clean(o) {
      for (var field in o) {
        let e = o[field];
        let type = this.getType(e).toLowerCase();
        if (type == "array") {
          o[field] = [];
        } else if (type == "object") {
          if (e) {
            this.clean(e);
          }
        } else {
          o[field] = null;
        }
      }
    },

    getType(o) {
      if (o instanceof Array) {
        return "Array";
      } else if (o instanceof Object) {
        return "Object";
      } else {
        return typeof o;
      }
    },
  },
};
</script>

<style lang="scss">
@import "../../../style/variables.scss";
.tx-list-query {
  // min-height: 60px;
  background: $tx-background-shallow;
  margin: 15px 15px 15px 15px;
  padding: 15px 15px 15px 15px;
  text-align: left;
  border: 1px solid rgb(61 126 165 / 50%);
  box-shadow: inset 0px 0px 5px #1d5a8f;
  color: $c-font;
  // border: 1px solid rgb(60 128 169 / 50%);
  &__button {
    display: inline-flex;
    > div {
      display: flex;
      align-items: center;
    }

    &__query {
      // min-width: 80px;
      // max-width: 80px;
      justify-content: flex-end;
      margin: 0px 10px;
    }
  }
  .tx-field-multiple-input {
    .tx-field-label {
      min-width: 130px;
      max-width: 130px;
    }
  }
  .tx-field-label {
    // min-width: 80px;
    // max-width: 80px;
    text-align: left;
    white-space: nowrap;
    margin: 0px 10px 0px 15px;
    .el-input--medium {
      max-width: 100%;
      min-width: auto;
    }
    .el-slect--medium {
      max-width: 100%;
      min-width: auto;
    }
  }

  .tx-field {
    margin: 5px 0px;
  }

  .el-slect--medium {
    min-width: 200px;
    max-width: 200px;
  }
  .el-input--medium {
    min-width: 200px;
    max-width: 200px;
  }
  .el-input-group {
    .el-input__inner {
      padding: 0px 0px 0px 15px; 
    }
  }
  
  .el-input__inner { 
    font-size: 14px;
  }
}
</style>
